<!DOCTYPE html><html lang=ch><head><meta charset=UTF-8><meta name=viewport content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=keywords content=clip-path><meta name=description content=clip-path><meta name=robots content=clip-path><meta name=author content=songyuanlu><meta content=yes name=apple-mobile-web-app-capable><meta content=black name=apple-mobile-web-app-status-bar-style><title>clip-path</title><link rel=stylesheet href=../../css/public/public.css><style type=text/css>img {
			width: 100%;
		    max-width: 304px;
		    -webkit-transition: 1s;
		    transition: 501ms;
		}
		img.polygon {
			-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
		}
		img.polygon:hover {
			-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
		
		img.inset1 {
			-webkit-clip-path: inset(10px 50px 100px 20px);
            clip-path: inset(10px 50px 100px 20px);
		}
		img.inset1:hover {
			-webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
		}
		img.inset2 {
			-webkit-clip-path: inset(10px 20px 10px 20px round 50% 50% 10% 25%);
           clip-path: inset(10px 20px 10px 20px round 50% 50% 10% 25%);
		}
		img.inset2:hover {
			-webkit-clip-path: inset(0 0 0 0 round 0% 0% 0% 0%);
			clip-path: inset(0 0 0 0 round 0% 0% 0% 0%);
		}

		
		img.circle {
			-webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
		}
		img.circle:hover {
			-webkit-clip-path: circle(50% at 30% 0%);
            clip-path: circle(50% at 30% 0%);
		}

		img.ellipse {
			-webkit-clip-path: ellipse(40% 50% at 50% 50%);
            clip-path: ellipse(40% 50% at 50% 50%);
		}
		img.ellipse:hover {
			-webkit-clip-path: ellipse(50% 50% at 50% 50%);
            clip-path: ellipse(50% 50% at 50% 50%);
		}</style><body><nav class=nav id=nav></nav><article class="page page-detail"><h1 class=article-h1>clip-path</h1><img src=../../images/css/mao.jpg><p>clip-path属性是指定一个应用到元素上的剪切路径。</p><p>形状态函数包括</p><p>1、 <span class=txt-mark>polygon(x0 y0, x1 y1,...)</span><br>对应坐标x值、坐标y值，可写多个。<br>定义一个多边形的剪切路径。<br><img class=polygon src=../../images/css/mao.jpg></p><p>2、 <span class=txt-mark>inset()</span>：<br><span class=txt-mark>inset(t r b l)</span>四个值分别对应剪切的值：（上值，右值，下值，左值）。<br><img class=inset1 src=../../images/css/mao.jpg><br><span class=txt-mark>inset(t r b l round ltR rtR rbR lbR)</span><br>分别对应剪切的值：（上值 右值 下值 左值 关键字round 左上半径 右上半径 右下半径 左下半径）。 <img class=inset2 src=../../images/css/mao.jpg></p><p>3、 <span class=txt-mark>circle(radius at x y)</span>：提供3个值 圆的半径、圆心x坐标、圆心y坐标，用at关键字把半径和坐标分开<br>定义一个圆形的剪切路径。<br><img class=circle src=../../images/css/mao.jpg></p><p>4、 <span class=txt-mark>ellipse(xR yR at x1 y1)</span>：提供4个值 椭圆的x轴半径、y轴半径、圆心x坐标、圆心y坐标，后面两个值用at关键字和前面两个值分开。<br>定义一个椭圆的剪切路径。<br><img class=ellipse src=../../images/css/mao.jpg></p></article><script src=../../lib/js/zepto.js></script><script src=../../js/public.js></script>